<template>
  <div id="category">
    <nav-bar class="nav-bar"><div slot="center">商品分类</div></nav-bar>
    <div class="content">
      <tab-menu :categories="categories"
                @selectItem="selectItem"></tab-menu>
      <scroll id="tab-content"
              :data="[categoryData]"
              ref="scroll"
              @scroll="contentScroll">
        <div>
          <tab-content-category :subcategories="showSubcategory"></tab-content-category>
          <tab-control :titles="['综合','新品','销售']"
                       @tabClick="itemClick"></tab-control>
          <goods-list :goods="showCategoryDetail"></goods-list>
        </div>
      </scroll>
    </div>
    <back-top @click.native="backtop" v-show="isShowBackTop"></back-top>
  </div>
</template>

<script>
import NavBar from 'components/common/navbar/NavBar'
import TabMenu from './childComps/TabMenu'
import TabContentCategory from './childComps/TabContentCategory'
import TabControl from 'components/content/tabControl/TabControl'
import Scroll from 'components/common/scroll/Scroll'
import GoodsList from 'components/content/goods/GoodsList'
import {getCategory, getSubcategory, getCategoryDetail} from "network/category";
import {tabControlMixin,backTopMixin} from "@/common/mixin"
import {POP, SELL, NEW} from "common/const";

export default {
  name:'Category',
  components:{
    NavBar,
    TabMenu,
    TabContentCategory,
    TabControl,
    Scroll,
    GoodsList
  },
  mixins:[tabControlMixin,backTopMixin],
  data() {
    return {
      categories:[],
      categoryData:{},
      currentIndex:-1
    }
  },
  created() {
    this._getCategory()
    this.$bus.$on('imgLoad',() => {
      this.$refs.scroll.refresh()
    })
  },
  computed:{
    showSubcategory(){
      if (this.currentIndex === -1) return {}
      return this.categoryData[this.currentIndex].subcategories
    },
    showCategoryDetail(){
      if (this.currentIndex === -1) return []
      return this.categoryData[this.currentIndex].categoryDetail[this.currentType]
      
    }
  },
  methods: {
    _getCategory(){
      getCategory().then(res => {
        this.categories = res.data.category.list
        console.log(res);
        for (let i = 0; i < this.categories.length; i++) {
          this.categoryData[i] = {
            subcategories:{},
            categoryDetail:{
              'pop':[],
              'new':[],
              'sell':[]
            }
          }
        }
        this.getSubcategories(0)
      })
    },
    getSubcategories(index){
      this.currentIndex = index;
      const mailKey = this.categories[index].maitKey;
      getSubcategory(mailKey).then(res => {
        this.categoryData[index].subcategories =res.data;
        this.categoryData = {...this.categoryData}
        this._getCategoryDetail(POP)
        this._getCategoryDetail(SELL)
        this._getCategoryDetail(NEW)
      })
    },
    _getCategoryDetail(type){
      const miniWallkey = this.categories[this.currentIndex].miniWallkey
      getCategoryDetail(miniWallkey, type).then(res => {
        this.categoryData[this.currentIndex].categoryDetail[type] = res
        this.categoryData = {...this.categoryData}
      })
    },
    selectItem(index){
      this.getSubcategories(index)
    },
    itemClick(index){
      switch(index){
        case 0:
          this.currentType = 'pop'
          break
        case 1:
          this.currentType = 'new'
          break
        case 2:
          this.currentType = 'sell'
          break
      }
    },
    contentScroll(position){
        this.listenShowBackTop(position)
    }
  },
}
</script>

<style scoped>
 #category {
    height: 100vh;
  }

  .nav-bar {
    background-color: var(--color-tint);
    font-weight: 700;
    color: #fff;
    position:relative;
    z-index: 10;
  }

  .content {
    position: absolute;
    left: 0;
    right: 0;
    top: 44px;
    bottom: 49px;

    display: flex;
  }

 #tab-content {
    height: 100%;
    flex: 1;
  }
</style>